<template>
    <a-modal :width="550"
             :title="title"
             destroyOnClose
             :maskClosable="false"
             v-model="visible">
        <a-form small :label-col="{span: 4}" :wrapper-col="{span: 20}">
            <a-form-item label="授权角色">{{roleName}}</a-form-item>
        </a-form>
        <div style="overflow-y: scroll;height: 400px;">
            <vxe-table
                    ref="menuTree"
                    show-overflow
                    highlight-hover-row
                    row-key
                    row-id="id"
                    :show-header="false"
                    :data="menuList"
                    :loading="loading"
                    :checkbox-config="{labelField: 'resourceName',checkStrictly: true,checkRowKeys:checkRowKeys}"
                    @checkbox-change="selectChangeEvent"
                    :tree-config="{children: 'childrenList', line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
                <vxe-table-column type="checkbox" tree-node></vxe-table-column>
            </vxe-table>
        </div>
        <div slot="footer" class="text-c">
            <a-button @click="close">关闭</a-button>
            <a-button type="primary" :loading="loadingSure" @click="sure">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    export default {
        data () {
            return {
                title: '角色菜单授权',
                visible: false,
                loading: false,
                loadingSure: false,
                menuList: [],
                selectKey: [],
                checkRowKeys: [],
                roleId: null,
                roleName: '',
            };
        },
        methods: {
            sure () {
                console.log();
                let params = {
                    id: this.roleId,
                    permissionIds: this.selectKey
                };
                this.loadingSure = true;
                this.$api.permission.authRole(params).then(res => {
                    this.loadingSure = false;
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.$message.success('授权成功');
                    this.$emit('done');
                    this.close();
                }).catch(err => {
                    this.loadingSure = false;
                    this.$message.error(err.errorMsg);
                });
            },
            show (data) {
                this.roleName = data.roleName;
                this.roleId = data.id;
                this.getMenuList(data.permissionIds || []);
                this.visible = true;
            },
            getMenuList (checkMenuArr) {
                this.loading = true;
                this.$api.permission.listbypermission().then(res => {
                    this.loading = false;
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.menuList = res && res.data && res.data.records || [];
                    this.$nextTick(() => {
                        this.$refs.menuTree.setAllTreeExpand(true);
                        this.selectKey = checkMenuArr;
                        this.checkRowKeys = checkMenuArr;
                    });
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.errorMsg);
                });
            },
            //表格选择
            selectChangeEvent ({records}) {
                this.selectKey = records.map(v => v.id);
            },
            close () {
                this.loading = false;
                this.loadingSure = false;
                this.checkRowKeys = [];
                this.selectKey = [];
                this.roleId = '';
                this.roleName = '';
                this.menuList = [];
                this.visible = false;
            }
        }
    };
</script>

<style scoped lang="scss">

</style>
